<template>
  <div class="Detail" :style="{ 'padding-bottom': !isSearchResult ? '272px' : '0' }">
    <div class="mixin">
      <div class="advanced-search">
        <!-- 左侧搜索区域 -->
        <div class="search-left">
          <div class="resource-types">
            <div class="title">资源类型:</div>
            <el-checkbox-group v-model="resourceTypes">
              <el-checkbox
                label="全选"
                @change="handleCheckAllChange"
              ></el-checkbox>
              <el-checkbox
                v-for="type in subResourceTypes"
                :key="type"
                :label="type"
                @change="handleCheckChange"
                >{{ type }}</el-checkbox
              >
            </el-checkbox-group>
          </div>

          <!-- 检索条件行 -->
          <div class="search-rows">
            <div
              class="search-row"
              v-for="(row, index) in searchRows"
              :key="index"
            >
              <div class="row-left">
                <!-- {{ searchRows.length }} -->
                <div style="display: flex">
                  <div class="jia" @click="addRow" v-if="index === 0"></div>
                  <div
                    class="shan"
                    @click="removeRow(index)"
                    v-if="index === 0 && searchRows.length > 1"
                  ></div>
                   <div
                    class="shan1"
                    @click="removeRow(index)"
                    v-if="index === 0 && searchRows.length == 1"
                  ></div>
                 
                </div>
                <el-select
                  v-if="index > 0"
                  v-model="row.logic"
                  placeholder="请选择逻辑符"
                  size="small"
                >
                  <el-option value="AND" label="AND"></el-option>
                  <el-option value="OR" label="OR"></el-option>
                  <el-option value="NOT" label="NOT"></el-option>
                </el-select>
              </div>
              <div class="row-middle">
                <el-select
                  v-model="row.field"
                  placeholder="请选择字段"
                  size="small"
                >
                  <el-option value="题名" label="题名"></el-option>
                  <el-option value="作者" label="作者"></el-option>
                  <el-option value="关键词" label="关键词"></el-option>
                </el-select>
              </div>
              <div class="row-right">
                <el-input
                  v-model="row.value"
                  placeholder="请输入内容"
                  size="small"
                >
                </el-input>
                <div class="gan"></div>
                <el-select
                  style="width: 100px"
                  v-model="row.matchType"
                  placeholder="匹配方式"
                  size="small"
                >
                  <el-option value="模糊" label="模糊"></el-option>
                  <el-option value="精确" label="精确"></el-option>
                </el-select>
              </div>
            </div>
          </div>

          <!-- 时间范围选择 -->
          <div class="time-range">
            <div class="time-label">时间范围：</div>
            <div class="time-picker">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              ></el-date-picker>
            </div>
          </div>

          <!-- 功能按钮 -->
          <div class="buttons">
            <div @click="reset" class="clear-btn">重置条件</div>
            <el-button
              type="primary"
              @click="search"
              class="confirm-btn"
              size="small"
            >
              检索
            </el-button>
          </div>
        </div>

        <!-- 右侧检索规则说明 -->
        <div class="sm">
          <div class="rule-card">
            <div class="rule-header">
              <h3>检索规则说明</h3>
            </div>
            <div class="rule-content">
              <ol>
                <li>
                  1.检索框内，支持布尔逻辑运算：AND(and / *)、OR(or /
                  +)、NOT(not / -)；支持英文半角括号()、引号""。
                </li>
                <li>
                  2.运算符优先级：NOT(not)>AND(and)>OR(or)；支持()来提高运算优先级。
                </li>
                <li>
                  3.若检索词中包含AND、OR、NOT、()等运算符或特殊字符时，需加""单独处理。如"Protein
                  Solvation and Hydration"、"multi-display"、"C++"。
                </li>
                <li>
                  4.精确：不做分词处理，允许前后加内容；模糊：允许分词及位置调换。作者/第一作者/导师/刊名/分类号/专利分类字段除外，此类字段精确为完全命中召回。
                </li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    isSearchResult() {
      return this.$route.query.searchz === "1";
    },
  },
  data() {
    return {
      resourceTypes: [], // 资源类型选择
      subResourceTypes: [
        "报刊文章",
        "图书",
        "研究报告",
        "资讯动态",
        "法规文件",
        "论文",
      ], // 子资源类型
      // 修复：将te改为logic，明确逻辑运算符字段
      searchRows: [
        { logic: "AND", field: "题名", value: "", matchType: "模糊" },
      ],
      dateRange: [], // 时间范围（Element日期范围选择器默认绑定数组）
    };
  },
  methods: {
    // 新增检索行
    addRow() {
      this.searchRows.push({
        logic: "AND",
        field: "题名",
        value: "",
        matchType: "模糊",
      });
    },
    // 删除检索行
    removeRow(index) {
      if (this.searchRows.length > 1) {
        this.searchRows.splice(index, 1);
      }
    },
    // 重置条件
    reset() {
      this.resourceTypes = [];
      this.searchRows = [
        { logic: "AND", field: "题名", value: "", matchType: "模糊" },
      ];
      this.dateRange = [];
    },
    // 执行检索（完善接口请求逻辑）
    search() {
      //   // 格式化日期范围（转为开始/结束对象）
      //   const formattedDateRange = this.dateRange.length
      //     ? { start: this.dateRange[0], end: this.dateRange[1] }
      //     : { start: "", end: "" };

      //   // 格式化检索条件参数
      //   const searchParams = {
      //     resourceTypes: this.resourceTypes.filter((type) => type !== "全选"), // 过滤掉"全选"标签
      //     conditions: this.searchRows.map((row) => ({
      //       logic: row.logic,
      //       field: row.field,
      //       value: row.value,
      //       matchType: row.matchType,
      //     })),
      //     dateRange: formattedDateRange,
      //   };
      //   this.$router.push({
      //     path: "/SearchPage?advanced=true?searchz=1",
      //   });
      this.$router.push({
        path: "/SearchPage?advanced=true&searchz=1",
      });
    },
    // 处理全选逻辑
    handleCheckAllChange(checked) {
      if (checked) {
        this.resourceTypes = ["全选", ...this.subResourceTypes];
      } else {
        this.resourceTypes = [];
      }
    },
    // 处理子选项变化
    handleCheckChange() {
      const checkedSubTypes = this.resourceTypes.filter((type) =>
        this.subResourceTypes.includes(type)
      );

      // 全选状态同步
      if (checkedSubTypes.length === this.subResourceTypes.length) {
        this.resourceTypes = ["全选", ...checkedSubTypes];
      } else {
        this.resourceTypes = checkedSubTypes;
      }
    },
  },
};
</script>



<style lang="scss" scoped>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

::v-deep .el-input--small .el-input__inner {
  height: 48px;
}

::v-deep .el-range-editor--small.el-input__inner {
  height: 48px;
}

::v-deep .el-range-editor--small .el-range-separator {
  line-height: 38px;
}

.Detail {
  padding: 24px 0;
  background: #f9faff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .mixin {
    width: 1400px;
    display: flex;
  }
}

.advanced-search {
  display: flex;

  .search-left {
    display: flex;
    flex-direction: column;
    width: 888px;
    background: #ffffff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    padding: 32px;
    margin-right: 16px;

    .resource-types {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 32px;

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        margin-right: 14px;
      }
    }

    .search-rows {
      .search-row {
        display: flex;
        gap: 10px;
        margin-bottom: 24px;
        align-items: center;

        .row-left {
          width: 108px;

          .jia {
            width: 48px;
            height: 48px;
            background-image: url(../../assets/img/zeng.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            margin-right: 14px;
          }

          .shan {
            width: 48px;
            height: 48px;
            background-image: url(../../assets/img/shan.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
          }
          
          .shan1 {
            width: 48px;
            height: 48px;
            background-image: url(../../assets/img/shan1.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            // cursor: pointer;
              cursor: not-allowed;
          }
        }

        .row-middle {
          width: 120px;
        }

        .row-right {
          flex: 1;
          display: flex;
          align-items: center;
          gap: 10px;
          border: 1px solid #d3d3d3;

          ::v-deep .el-input__inner {
            border: none !important;
          }

          .gan {
            width: 1px;
            height: 32px;
            background: #d3d3d3;
            // border: 1px solid #d3d3d3;
          }
        }
      }
    }

    .time-range {
      display: flex;
      align-items: center;
      gap: 10px;

      .time-label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        margin-right: 14px;
      }
    }

    .buttons {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 140px;

      .clear-btn {
        padding: 12px 42px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }

      .confirm-btn {
        padding: 12px 42px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        background-color: #409eff;
        border-color: #409eff;

        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }

  .sm {
    width: 434px;
    height: 544px;
    background: #ffffff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.07);
    border-radius: 4px;

    .rule-card {
      .rule-header {
        padding: 24px;

        h3 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 22px;
          color: #333333;
        }
      }

      .rule-content {
        padding: 0 24px;

        ol {
          list-style-type: none;
          padding-left: 0;
          margin: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          line-height: 26px;

          li {
            margin-bottom: 23px;
          }
        }
      }
    }
  }
}
</style>



